<template>
    <div>
        <el-dialog
            :before-close="closeDialog"
            :visible.sync="localFormVisible"
            title="选择餐品"
            width="47%"
            append-to-body
        >
            <el-table
                :data="tableData"
                :height="300"
                border
                stripe
                style="width: 100%"
                @selection-change="handleSelectionChange"
            >
                <el-table-column prop="mealId" type="selection"></el-table-column>
                <el-table-column label="序号" type="index" width="60"></el-table-column>
                <el-table-column label="餐品名称" prop="mealName" width="180"></el-table-column>
                <el-table-column label="餐品单价" prop="price" width="180" :formatter="formatPrice"></el-table-column>
                <el-table-column
                    label="图片"
                    prop="imageUrl"
                    width="140">
                    <template v-slot="scope">
                        <img :src="require('@/assets/images/'+scope.row.imageUrl)"  alt="aaa" style="width: 100px; height: 100px;">
                    </template>
                </el-table-column>
            </el-table>

            <div slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">关闭</el-button>
                <el-button type="primary" @click="saveMeal" :disabled="selectedMeals.length > maxMealCount">保存</el-button>
                <!-- 当选择的餐品数量超过订餐人数时禁用保存按钮 -->
            </div>
            <span style="color: red" v-if="selectedMeals.length > maxMealCount">选择餐品数量不可超过员工数</span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "OrderMeal",
    props: {
        formVisible: {
            type: Boolean,
            default: false
        },
        maxMealCount: {
            type: Number,
            default: 1  // 默认最大餐品数量为1（将由父组件动态传入所选员工的人数）
        }
    },
    data() {
        return {
            tableData: [],  // 餐品数据
            selectedMeals: [],  // 存储选中的餐品
            localFormVisible: this.formVisible,
        };
    },
    methods: {
        closeDialog() {
            this.localFormVisible = false;
            this.$emit('update:formVisible', false);
        },
        formatPrice(row, column, cellValue, index) {
            // 使用 toFixed 方法来格式化小数，保留两位小数
            // 注意：toFixed 返回的是一个字符串
            return cellValue.toFixed(2);
        },
        getMealList() {
            this.$http.post('getAllMeals').then(res => {
                this.tableData = res.data;
            }).catch(() => {
                this.$message.error('获取餐品列表失败，请联系管理员');
            });
        },
        handleSelectionChange(selectedRows) {
            this.selectedMeals = selectedRows;
        },
        saveMeal() {
            this.$emit('submitForm', this.selectedMeals);  // 将选中的餐品发送给父组件
            this.closeDialog();
        }
    },
    created() {
        this.getMealList();
    },
    watch: {
        formVisible(newVal) {
            this.localFormVisible = newVal;
        }
    }
}
</script>
